<div class="row mb-3">
  <div class="col-12">
    <filter-list
      request="request"
      callback="getList(serviceIndex)"
      create-url="'/portal/service/create'"
    >
    </filter-list>
  </div>
</div>
<div class="row mb-3">
  <div class="col-12">
    <a
      href="/portal/service/create"
      class="btn btn-primary btn-sm float-end px-3"
    >
      <i class="fas fa-plus"></i> Create Service
    </a>
  </div>
</div>

<div class="row">
  <service-hub class="col-md-12" hub-name="'hotel'"></service-hub>
</div>
<div class="row">
  <div class="col-12">
    <div class="card-deck">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-gamepad"></i> Service ABC</h5>
          <p class="card-text">
            This is a longer card with supporting text below as a natural
            lead-in to additional content. This content is a little bit longer.
          </p>
          <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
          </p>
        </div>
        <div class="card-footer bg-white p-2">
          <a href="/portal/service/create" class="btn btn-sm btn-link float-end"
            ><i class="fas fa-plus"></i> Start Create</a
          >
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">
            <i class="fas fa-mobile"></i> App service...
          </h5>
          <p class="card-text">
            This card has supporting text below as a natural lead-in to
            additional content.
          </p>
          <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
          </p>
        </div>
        <div class="card-footer bg-white p-2">
          <a href="/portal/service/create" class="btn btn-sm btn-link float-end"
            ><i class="fas fa-plus"></i> Start Create</a
          >
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-mobile"></i> Card title</h5>
          <p class="card-text">
            This is a wider card with supporting text below as a natural lead-in
            to additional content. This card has even longer content than the
            first to show that equal height action.
          </p>
          <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
          </p>
        </div>
        <div class="card-footer bg-white p-2">
          <a href="/portal/service/create" class="btn btn-sm btn-link float-end"
            ><i class="fas fa-plus"></i> Start Create</a
          >
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h5 class="card-title"><i class="fas fa-globe"></i> Card title</h5>
          <p class="card-text">
            This is a wider card with supporting text below as a natural lead-in
            to additional content. This card has even longer content than the
            first to show that equal height action.
          </p>
          <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
          </p>
        </div>
        <div class="card-footer bg-white p-2">
          <a href="/portal/service/create" class="btn btn-sm btn-link float-end"
            ><i class="fas fa-plus"></i> Start Create</a
          >
        </div>
      </div>
    </div>
  </div>
</div>
